<template>
  <slot name="trigger" />
  <teleport v-if="modalOpen" to="body">
    <div
      class="modal dialog-event"
      :class="{ modelbg: modal }"
      @click.self="(modal && modalclose()) || null"
    >
      <slot />
    </div>
  </teleport>
</template>
<script lang="ts" src="./EwgDialog.script.ts"></script>
<style lang="scss" scoped>
  .dialog-event {
    pointer-events: none;
    &:v-deep(& > *) {
      pointer-events: auto;
    }
  }
  .modelbg {
    background-color: rgba(0, 0, 0, 0.5);
    pointer-events: auto;
  }
</style>
